
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>原材料管理页面</title>
    <script src="../../../res/js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="../../../res/layui/css/pulas.css" media="all">
</head>
<body>

<style>
    .layui-table-cell.laytable-cell-1-0-4 {
        color: chocolate;
    }
    .layui-table-body {
         position: relative;
         overflow: auto;
         margin-right: -1px;
         margin-bottom: -1px;
         font-family: fantasy;
     }

</style>
<div class="demoTable">

    <div class="layui-inline">
        <input class="labtna" name="materialName" id="materialName" autocomplete="off" placeholder="输入材料关键字">
    </div>

    <input type="hidden" id="materialId" name="materialId">

    <div class="layui-inline layui-form">
        <select name="typeId" id="typeId"  class="labtna"  lay-filter="brickType">
            <option value="">
                请选择类型
            </option>
        </select>
    </div>
    <button class="latn"  data-type="reload" id="axt">刷新</button>
    <button class="latn" id="materialsAdd" data-type="add">增加</button>
</div>
<table class="layui-hide" id="materials" lay-filter="demo"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" id="imgUpdate">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/javascript" src="../../../res/js/base.js"></script>
<script src="../../../res/layui/layui.js"></script>
<script>

    layui.use(['form','laydate', 'laypage', 'layer', 'table', 'upload', 'element'], function(){
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
        layer = layui.layer //弹层
            ,table = layui.table //表格
            ,upload = layui.upload //上传
            ,form=layui.form
            ,element = layui.element; //元素操作


        //监听Tab切换
        element.on('tab(demo)', function(data){
            layer.msg('切换了：'+ this.innerHTML);
            console.log(data);
        });

        //执行一个 table 实例
        table.render({
            elem: '#materials'
            ,height: 490
            ,url: '/material/selectAll' //数据接口
            ,page: true //开启分页
            ,method:'post'
            ,cols: [[ //表头
                {type:'checkbox', fixed: 'left'},
                 {field: 'materialId', title: '材料ID', width:120, fixed: 'left'}
                ,{field: 'typeName', title: '材料类型', width:200}
                ,{field: 'materialName', title: '材料名称', width:200}
                ,{field: 'money', title: '材料价格(g)', width:120 }
                ,{fixed: 'right',title: '操作', width: 225, align:'center', toolbar: '#barDemo'}
            ]]
            ,id: 'testReload',

        });

        //监听工具条
        table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){
                var matId=data.materialId;
                layer.confirm('确认删除？', function(index){
                    layer.close(index);
                    var url = "/material/deleteById";
                    var data={id:matId};
                    $.post(url,data,function(mes){
                        if (mes.status==1){
                            layer.msg(mes.message);
                            table.reload("testReload");
                        }else if(mes.status==0){
                            layer.msg("此药材正在使用");
                        }
                    },"json");
                });
            } else if(layEvent === 'edit'){
                   var data=obj.data;
                   var materialId=data.materialId;
                       layer.open({
                           type: 	2,
                           area : ['55%' , '65% '],//弹出框大小
                           shift:1,//弹出框动画效果
                           content: 'materials.html?materialId='+materialId //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                       });
            }
        });

        //条件查询
        var $ = layui.$;

        $('.demoTable .layui-btn').on('click', function(){
            var materialName = $('#materialName');
            //执行重载
                table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    materialName: materialName.val()
                }
            });
        });

        $("#axt").click(function(){
            window.location.reload();
        })

        $('#materialsAdd').on('click', function(){
            layer.open({
                type: 	2,
                area : ['55%' , '65% '],//弹出框大小
                shift:1,//弹出框动画效果
                content: ['materials.html','on'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            });
        });
        form.on('select(brickType)', function(data) {
            var val= data.elem[data.elem.selectedIndex].text;
            //执行重载
            if(val=="请选择类型"){
                val="";
            }
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    typeName: val
                }
            });
            console.info(val);
        });
        $(function () {
            $('#materialName').bind('input propertychange', function() {
                var materialName = $('#materialName');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        materialName: materialName.val()
                    }
                });
            });

            url = "/hqRawmaterialType/selectTypeName";
            data = null;
            $.get(url,data,function (obj) {
                $.each(obj,function(index,item){
                    $("#typeId").append("<option value="+item.typeId+"> "+item.typeName+"</option>");
                })
                //重新渲染
                form.render('select');
            },"json");
        })
    });
</script>
</body>
</html>